<template>
    <div id="room">
      <mu-container class="roomPaper">

        <mu-row>
            <mu-appbar class="roomAppBar"  color="primary">
                <mu-icon value="whatshot" slot="left"></mu-icon>
                酒店活动
            </mu-appbar>
        </mu-row>

        <mu-row gutter>
          <mu-col xl="3" lg="4" md="6" sm="12" span="12"  v-for="activity in ActivityList" :key="activity.id">

            <mu-card style=" margin: 10px auto;"  raised>
              <!--<mu-card-header title="Myron Avatar" sub-title="sub title">-->
              <!--</mu-card-header>-->
              <mu-card-media :title="activity.title" >
              <!--<mu-card-media>-->
                <img src="../assets/imgs/room.jpg">
              </mu-card-media>
              <!--<mu-card-title :title="rt.roomType" :sub-title="rt.remark"></mu-card-title>-->
              <mu-card-text>
                <mu-list id="roomDetail">

                  <mu-list-item >
                    <span>
                      <mu-icon left value="star"></mu-icon>
                      {{ activity.detail }}
                    </span>
                  </mu-list-item>
                  <mu-divider></mu-divider>

                  <mu-list-item >
                    <span>
                      <mu-icon left value="star"></mu-icon>
                      参加活动要求: {{ activity.activityLimit }}
                    </span>
                  </mu-list-item>
                  <mu-divider></mu-divider>

                  <mu-list-item >
                    <span>
                      <mu-icon left value="star"></mu-icon>
                      活动状态： {{ activity.status }}
                    </span>
                  </mu-list-item>
                  <mu-divider></mu-divider>

                  <mu-list-item :ripple="true">
                    <span>
                      开始时间: {{ activity.startDate | formatTime('yyyy-MM-dd hh:mm:ss') }}
                      <!-- 开始时间: {{new Date(activity.startDate).format("yyyy-MM-dd") }} -->
                    </span>
                      <span>
                      结束时间: {{ activity.endDate | formatTime('yyyy-MM-dd hh:mm:ss')}}
                    </span>
                  </mu-list-item>
                </mu-list>
                <!--<mu-card-actions>-->
                  <!--<mu-button color="teal">剩余：30</mu-button>-->
                  <!--<mu-button color="greenA700" @click="book(rt.typeId)">立即预订</mu-button>-->
                <!--</mu-card-actions>-->

              </mu-card-text>
            </mu-card>
          </mu-col>
        </mu-row>

      </mu-container>
    </div>
</template>

<script>
  import { getAllActivity } from '@/api/activity'
    export default {
        name: "Activity",
      data(){
          return{
            ActivityList: null,
          }
      },
      created: function(){
          this.fetchData()
      },
      methods:{
          navigateTo(val){
            this.$toast.message("clicked!")
          },

          fetchData(){
            getAllActivity().then(res => {
            console.log("fetchDate中的res: " + JSON.stringify(res));
            console.log("fetchDate中的res.data: " + JSON.stringify(res.data));
              this.ActivityList = res.data;
            })
            console.log("fetchDate之后的activityList: " + this.ActivityList)
          },
      }
    }
</script>

<style scoped>
  #room{
    /*background-image: linear-gradient(270deg,#8146b4,#6990f6);*/
  }
  .mu-item,.mu-card-text{
    padding: 0;
  }
  .roomAppBar{
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 0;*/
    /*z-index: 102;*/
    height: 40px;
    width: auto!important;
    border-radius: 30px;
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 0;*/
    margin: 10px;
    /*background-color: #e91e63;*/
    color: #fff;
    padding: 10px;
  }
.roomPaper{
  margin: 20px auto 0;
  padding: 20px 0;
}
  #roomDetail span{
    flex: auto;
  }
  #roomDetail .mu-icon{
    vertical-align: bottom;
  }
  .mu-card-media img{
    height: inherit;
  }
</style>
